<template>
  <input
    class="search"
    type="text"
    v-model="input1"
    placeholder="根据事件类型搜索"
    @keyup.enter="handleSearch"
  />
  <div id="popup" v-if="isShow">
    <div class="header">
      <span>事件详细信息</span>
      <button @click="hangdleDel">X</button>
    </div>
    <div class="box">
      <div class="left">
        <span>事件等级</span>
        <span>发生时间</span>
        <span>发生地点</span>
        <span>处理状态</span>
      </div>
      <div class="right">
        <span>{{ grade }}</span>
        <span>{{ name.time }}</span>
        <span>{{ name.site }}</span>
        <span>{{ state }}</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed, nextTick, reactive, ref, toRefs } from 'vue'
import { useMapStore } from '@/stores/map.js'
import { Query } from '@/Utils/Query1.js'
import { Point } from '@/Utils/Point1.js'
let { map } = toRefs(useMapStore())
const input1 = ref('')
const isShow = ref(false)
let features
let layer
let source
let name = reactive({
  grade: '1',
  time: '2',
  site: '3',
  status: '4'
})
const grade = computed(() => {
  if (name.grade == '1') {
    name.grade = '轻微事故'
  } else if (name.grade == '2') {
    name.grade = '一般事故'
  } else if (name.grade == '3') {
    name.grade = '重大事故'
  } else if (name.grade == '4') {
    name.grade = '特大事故'
  }
  return name.grade
})
const state = computed(() => {
  if (name.status == '0') {
    name.status = '待处理'
  } else if (name.status == '1') {
    name.status = '处理中'
  } else if (name.status == '2') {
    name.status = '已归档'
  }
  return name.status
})
// 通过Style类创建icon
const icon = new ol.style.Style({
  /**{olx.style.IconOptions}类型*/
  image: new ol.style.Icon({
    anchor: [0.5, 60],
    anchorOrigin: 'top-right',
    anchorXUnits: 'fraction',
    anchorYUnits: 'pixels',
    offsetOrigin: 'top-right',
    // offset:[0,10],
    //图标缩放比例
    scale: 0.5,
    //透明度
    opacity: 0.75,
    //图标的url
    src: '/src/assets/images/location.png'
  })
})
source = new ol.source.Vector({})
layer = new ol.layer.Vector({
  source,
  style: icon
})
nextTick(() => {
  map.value.addLayer(layer)
})
// // 发送关键字请求数据库，获得数据
const handleSearch = () => {
  source.clear()
  var service = {
    name: 'guanggu',
    layerId: 2
  }
  var where = `事件类型 like '%${input1.value}%'`
  Query.queryByAttr({
    service,
    where,
    success: (res) => {
      var format = new Zondy.Format.PolygonJSON()
      features = format.read(res)
      source.addFeatures(features)
      if (res) {
        //  为map添加鼠标移动事件监听，当指向标注时改变鼠标光标状态
        map.value.on('pointermove', function (e) {
          var pixel = map.value.getEventPixel(e.originalEvent)
          var hit = map.value.hasFeatureAtPixel(pixel)
          map.value.getTargetElement().style.cursor = hit ? 'pointer' : ''
        })
        // 设置点击弹窗及弹窗位置
        map.value.on('click', function (evt) {
          var service = {
            name: 'guanggu',
            layerId: 2
          }
          var point = evt.coordinate
          Point.query({
            position: point,
            service,
            success: (res) => {
              if (input1.value == res.SFEleArray[0].AttValue[1]) {
                name.grade = res.SFEleArray[0].AttValue[2]
                name.time = res.SFEleArray[0].AttValue[3]
                name.site = res.SFEleArray[0].AttValue[4]
                name.status = res.SFEleArray[0].AttValue[7]
                isShow.value = true
              } else {
                isShow.value = false
              }
            }
          })
          let position1 = ref(0)
          let position2 = ref(0)
          if (evt) {
            var position = map.value.getPixelFromCoordinate(evt.coordinate)
            position1.value = position[0]
            position2.value = position[1]
            //监听地图移动
            map.value.on('moveend', function () {
              position = map.value.getPixelFromCoordinate(position)
              position1.value = position[0]
              position2.value = position[1]
            })
          }
        })
      }
    }
  })
}
function hangdleDel() {
  isShow.value = false
}
</script>

<style scope>
.search {
  position: absolute;
  top: 10px;
  left: 65px;
  width: 300px;
  height: 30px;
  z-index: 1000;
  border-radius: 10px;
}
#popup {
  width: 350px;
  height: 270px;
  position: fixed;
  left: 18px;
  top: 260px;
  border: 1px solid rgb(235, 235, 235);
  z-index: 1000;
  border-radius: 5px;
}
.header {
  width: 100%;
  border-radius: 5px;
  background-color: rgb(64, 158, 255);
}
.header span {
  color: #fff;
  margin-left: 10px;
  line-height: 38px;
}
.header button {
  border: none;
  margin-left: 210px;
  color: #fff;
  background-color: rgb(64, 158, 255);
  cursor: pointer;
}
.box {
  width: 95%;
  height: 100%;
  z-index: 1000;
  display: flex;
  margin-left: 7px;
  background-color: #fff;
  border-radius: 5px;
}
.left {
  display: flex;
  flex-direction: column;
  width: 150px;
  height: 200px;
}
.right {
  display: flex;
  flex-direction: column;
  width: 250px;
  height: 200px;
}
.left span {
  font-weight: 600;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border: 1px solid rgb(235, 235, 235);
}
.right span {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 40px;
  line-height: 20px;
  padding: 0px 10px;
  border: 1px solid rgb(235, 235, 235);
}
</style>
